<template>
	<view>
		<navbar :isback="true" title="制像章"></navbar>
		<u-loading-page icon-size="100rpx" :loading="loading" loading-text="驼乡生活信息超市"></u-loading-page>
		<view class="con" v-if="!loading">
			<swiper v-if="list3.length>0" :indicator-dots="false" class="video" circular interval='2000' :current="curr" @change="change">
				<swiper-item v-for="(item,index) in list3" :key="index">
					<image class="video" v-if="getItemType(item) === 'image'" :src="getSource(item)" mode="aspectFill"
						@tap="clickHandler(getItemType(item),index)"></image>
					<video @ended='ended(index)' class="video" v-if="getItemType(item) === 'video'"
						:id="`video-${index}`" :enable-progress-gesture="false" :src="getSource(item)" controls
						@tap="clickHandler(getItemType(item),index)" @fullscreenchange='fullscreenchange'></video>
				</swiper-item>
			</swiper>
			<view class="linkbox" v-if="indexHref">
				{{indexHref}}
			</view>
			<view class="form">
				<view class="form__item">
					<view class="form__item__lable">
						我的姓名
					</view>
					<input class="inp" v-model="form.name" placeholder="请输入真实姓名"/>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="form__item">
					<view class="form__item__lable">
						我的电话
					</view>
					<input class="inp" placeholder="请输入电话号码" v-model="form.phone" maxlength="11" type="number"/>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="form__item">
					<view class="form__item__lable">
						我的住址
					</view>
					<input class="inp" placeholder="请输入详细住址" v-model="form.address"/>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="form__item">
					<view class="form__item__lable">
						制像章数量
					</view>
					<u-number-box @change='changenum' v-model="form.number" :min="1" integer></u-number-box>
					<!-- <u-icon name="arrow-right"></u-icon> -->
				</view>
			</view>
			<view class="linkbox linkbox1">
				直径5cm
			</view>
			<view class="form__title">
				<view class="form__title__line">
					
				</view>制像章图片
			</view>
			<view class="upbox" v-if="card_imageslist[0]" @click="preview([URL(card_imageslist[0])],0)">
				<view class="cha" @click.stop="del('card_imageslist',0)">
					<u-icon name="/static/my/cha.png" size="20rpx"></u-icon>
				</view>
				<image style="width: 164rpx;height: 164rpx;" :src="URL(card_imageslist[0])" mode="aspectFill">
				</image>
			</view>
			<!-- <image class="upbox" :src="URL(card_imageslist[0])" mode="aspectFill" v-if="card_imageslist[0]"></image> -->
			<view class="upbox" @click="uppic('card_images',0)" v-else>
				<image src="/static/msg/pic.png" class="upbox__pic" mode=""></image>
				上传图片
			</view>
			<view class="footer">
				<u-button @click="submit" :loading='btnloading' :text="'下单 ￥'+form.price+'元'" color="linear-gradient(91deg, #6E77FA, #5E77FD)" size="large" shape='circle'></u-button>
			</view>
		</view>
<view class="kf">
			<button class="u-reset-button" open-type="contact">
				<image src="/static/xishi/kf.png" class="kficon" mode=""></image>
			</button>
		</view>
	</view>
</template>

<script>
	import home from '@/api/_home.js'
	import {
		BASE_URL
	} from '@/api/config';
	export default {
		data() {
			return {
				loading:true,
				list3: [],
				card_imageslist:[''],
				indexHref:'',
				curr: 0,
				value1:'',
				form:{
					type:7,
					name:'',
					phone:'',
					address:'',
					price:'',
					text:'',
					image:'',
					number:1
				},
				btnloading:false,
				price:''
			};
		},
		methods: {
			changenum(e){
				this.form.price=this.price*e.value
			},
			submit(){
				let _this=this
				let {name,phone,address,text} = this.form
				if(!name){
					uni.$u.toast('请输入姓名')
					return
				}
				if(!phone){
					uni.$u.toast('请输入手机号')
					return
				}
				if(!address){
					uni.$u.toast('请输入地址')
					return
				}
				this.form.image=this.card_imageslist[0]
				if(!this.form.image){
					uni.$u.toast('请上传像章图片')
					return
				}
				this.btnloading=true
				
				home.undifineOrderType(this.form).then(res=>{
					_this.paybuy(res)
				})
			},
			ended(index){
				console.log(this.isqp)
				if(this.isqp){
					return
				}
				index++
				this.curr=index
				if(this.curr>=this.list3.length){
					this.curr=0
				}
				// console.log(this.curr)
				this.playVideo(this.curr)
			},
			prevent(item) {
				// console.log(item)
				this.item = item
			},
			clickHandler(type,index) {
				// this.$emit('click', index)
				// console.log(type,index)
				if(type=='image'){
					this.preview([this.list3[index]],0)
				}
				// if(type=='image')
			},
			paybuy(res) {
				let _this = this
				let data = res.data.data
				let appId = data.appId;
				let timeStamp = data.timeStamp;
				let nonceStr = data.nonceStr;
				let packageX = data.package;
				let signType = 'MD5';
				let paySign = data.paySign;
				
				uni.requestPayment({
					provider: 'wxpay',
					appId: appId, //小程序Appid
					timeStamp: timeStamp, //创建订单时间戳
					nonceStr: nonceStr,
					package: packageX, // 订单包
					signType: signType, // 加密方式统一'MD5'
					paySign: paySign, // 后台支付签名返回
					success: function(res) {
						_this.$u.toast('支付成功')
						setTimeout(() => {
							_this.btnloading=false
							uni.redirectTo({
								url: '/pages/my/jflist'
							})
						}, 1000)
					},
					fail: function(err) {
						_this.$u.toast('支付失败')
						_this.btnloading=false
					},
					complete() {
						
					}
				});
			
			},
			getItemType(item) {
				if (typeof item === 'string') return uni.$u.test.video(this.getSource(item)) ? 'video' : 'image'
				if (typeof item === 'object' && this.keyName) {
					if (!item.type) return uni.$u.test.video(this.getSource(item)) ? 'video' : 'image'
					if (item.type === 'image') return 'image'
					if (item.type === 'video') return 'video'
					return 'image'
				}
			},
			// 获取目标路径，可能数组中为字符串，对象的形式，额外可指定对象的目标属性名keyName
			getSource(item) {
				// console.log(item)
				if (typeof item === 'string') return item
				if (typeof item === 'object' && this.keyName) return item[this.keyName]
				else uni.$u.error('请按格式传递列表参数')
				return ''
			},
			fullscreenchange(e) {
				this.isqp = e.detail.fullScreen
				// console.log(e.detail.fullScreen)
			},
			change(e) {
				// 当前的激活索引
				// console.log(e)
				clearTimeout(this.timmer)
				let _this = this
				const {
					current
				} = e.detail
				if (this.getItemType(this.list3[current]) == 'image') {
					this.timmer = setTimeout(() => {
						_this.curr++
						if (_this.curr >= _this.list3.length) {
							_this.curr = 0
						}
					}, 2000)
				}
				this.pauseVideo(this.swipercur)
				this.swipercur = current
				this.curr = current
				this.playVideo(this.swipercur)
			},
			pauseVideo(index) {
				const lastItem = this.getSource(this.list3[index])
				if (uni.$u.test.video(lastItem)) {
					// 当视频隐藏时，暂停播放
					const video = uni.createVideoContext(`video-${index}`, this)
					video.pause()
				}
			},
			playVideo(index) {
				// console.log(this.list3[0])
				const lastItem = this.getSource(this.list3[index])
				if (uni.$u.test.video(lastItem)) {
					// 当视频隐藏时，暂停播放
					const video = uni.createVideoContext(`video-${index}`, this)
					video.play()
				}
			},
			getindex() {
				this.list3 = []
				home.getInitData({type:7}).then(res=>{
					if(res.data.code==1){
						this.loading=false
						res.data.data.banner[0].images.split(',').map(t => {
							this.list3.push(BASE_URL + t)
						})
						let _this = this
						if(this.list3.length>1){
							if (this.getItemType(this.list3[0]) == 'image') {
								this.timmer = setTimeout(() => {
									_this.curr++
								}, 2000)
							}else{
								this.playVideo(0)
							}
						}else{
							this.playVideo(0)
						}
						this.indexHref=res.data.data.intro.title
					}
				})
				home.readConfig({configName:'imagePrice'}).then(res=>{
					if(res.data.code==1){
						this.price=res.data.data.imagePrice
						this.form.price=this.price*this.form.number
					}
				})
			},
			del(name, index) {
				if (name == 'card_imageslist') {
					this[name][index] = ''
				} else {
					this[name].splice(index, 1)
				}
				this.$forceUpdate()
			},
			uppic(type, index) {
				let _this = this
				let count = 1
				if (type == 'ad_images') {
					count = 6 - this.ad_imageslist.length
				}
				uni.chooseImage({
					count,
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						console.log(tempFilePaths)
						uni.showLoading()
						tempFilePaths.map(t => {
							uni.uploadFile({
								url: BASE_URL + '/api/Common/upload',
								filePath: t,
								name: "file",
								header: {
									"token": uni.getStorageSync('xxcstoken')
								},
								success: function(res) {
									uni.hideLoading()
									if (JSON.parse(res.data).code == 1) {
			
										if (type == 'ad_images') {
											_this.ad_imageslist.push(JSON.parse(res.data)
												.data.url)
										} else if (type == 'jtpic') {
											_this.jtpic.push(JSON.parse(res.data)
												.data.url)
										} else {
											_this.card_imageslist[index] = JSON.parse(res
													.data).data
												.url
										}
										_this.$forceUpdate()
			
									} else {
			
										if (JSON.parse(res.data).code == 401) {
											uni.$u.toast('未登录，请登录')
											_this.to('/pages/my/login')
										}
									}
								},
								error: function(rev) {
									console.log(rev);
								}
							});
						})
			
					}
				});
			}
		},
		onLoad() {
			this.getindex()
			let _this = this
			setTimeout(() => {
				_this.istj = false
			}, 10000)
			
		}
	}
</script>

<style lang="scss">
.con{
	padding: 30rpx;
	.linkbox {
		margin-top: 28rpx;
		// height: 96rpx;
		background: #F7F7F9;
		border-radius: 15rpx;
		padding:22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 26rpx;
		color: #1E1E1E;
		margin-bottom: 16rpx;
	}
	.linkbox1{
		text-align: center;
		background: rgba(54, 146, 255, .2);
		color: #3692FF;
		margin-bottom: 0;
		margin-top: 0;
	}
}
.swiper {
		height: 450rpx;
	}

	.video {
		width: 690rpx;
		height: 484rpx;
		background: #1B64F9;
		border-radius: 25rpx;
	}
.form{
	&__item{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 44rpx 0;
		&__lable{
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #000000;
			line-height: 30rpx;
		}
		.inp{
			flex: 1;
			text-align: right;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #000000;
			margin-right: 22rpx;
		}
		/deep/.input-placeholder{
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #000000;
		}
	}
	&__title{
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 30rpx;
		color: #1E1E1E;
		line-height: 30rpx;
		display: flex;
		align-items: center;
		margin-top: 42rpx;
		margin-bottom: 30rpx;
		&__line{
			width: 11rpx;
			height: 32rpx;
			background: #3692FF;
			border-radius: 6rpx;
			margin-right: 12rpx;
		}
	}
}
/deep/.u-textarea{
	background-color: #F7F7F9!important;
}
.footer{
	padding: 54rpx 20rpx;
}
.upbox {
		width: 164rpx;
		height: 164rpx;
		background: #F5F6FA;
		border-radius: 20rpx;
		display: flex;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #101014;
		line-height: 24rpx;
		margin-right: 20rpx;
		position: relative;
		overflow: hidden;

		.cha {
			padding: 6rpx;
			background-color: rgba(0, 0, 0, .8);
			position: absolute;
			top: 4rpx;
			right: 4rpx;
			border-radius: 20rpx;
			z-index: 2;
		}

		&__pic {
			width: 54rpx;
			height: 54rpx;
			margin-bottom: 18rpx;
		}
	}
</style>